<template>
    <manage-pubilc-container :options="{width:1920,height:1080}">
        <div class="login-wrap">
            <img class="login-title" src="../../img/name.png">
            <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="0px" class="demo-ruleForm login-container login-css">
            <h3 class="title">用 户 登 录</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码" @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox class="remember" >自动登录</el-checkbox>
                <span class="forParss">忘记密码</span>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button id="bot" @click="submitForm('ruleForm')" :loading="logining">登 录</el-button>
                <!-- <el-button id="bot1" >导入加密key</el-button> -->
            </el-form-item>
            </el-form>
            <footer class="login-footer">
            <div class="login-footer-div first">
                <img src="../../img/download.png">
                <span>系统制定浏览器：chrome.25.0.1363.152.exe</span>
            </div>
            <div class="login-footer-div">
                <img src="../../img/download.png">
                <span>证书登录插件：JITComVCTK_S.exe</span>
            </div>
            <div></div>
            </footer>
        </div>
    </manage-pubilc-container>
</template>

<script>
export default {
  data() {
    return {
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: true,
      ruleForm: {
        username: '',
        password: '',
      },
      //rules前端验证
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },
  // 里面的函数只有调用才会执行
  methods: {
    //获取info列表
    submitForm(formName) {
      this.$router.push({ path: "/"});
    },
  }
}
</script>

<style scoped >
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-image: url('../../img/bg2.png');
  background-repeat: no-repeat;
   /* 固定背景图片位置 */
  background-attachment:fixed;
  position: relative;
  
}
.login-wrap .el-form-item{
    margin-bottom: 30px;
}
.login-title{
    width: 300px;
    display: block;
    margin: 0 auto;
    box-sizing: content-box;
    padding-top: 130px;
    padding-right: 150px;
}
.login-container {
  border-radius: 10px;
  padding: 30px 45px 15px 35px;
  color:white;
  text-align: left;
  position: absolute;
  width: 386px;
  right: 353px;
  bottom: 300px;
}
.title {
  margin: 0px auto 44px auto;
  text-align: center;
  color: white;
  font-weight: inherit;
}
.forParss{
  font-size: 14px;
  float: right;
  cursor: pointer;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
#bot,#bot1{
  width: 100%;
  background: linear-gradient(left,#409EFF,rgb(18,102,229));
  background: -webkit-linear-gradient(left,#409EFF,rgb(18,102,229));
  background: -o-linear-gradient(left,#409EFF,rgb(18,102,229));
  background: -moz-linear-gradient(left,#409EFF,rgb(18,102,229));
  background: -ms-linear-gradient(left,#409EFF,rgb(18,102,229));
  color:white;
  border: rgb(18,102,229);
  font-size: 20px;
  line-height: 20px;
}
#bot:hover{
  background-color: #409EFF;
  color:white;
}
#bot1:hover{
  background-color: #409EFF;
  color:white;
}
.login-footer{
  width: 100%;
  color: #ccc;
  font-size: 14px;
  position: fixed;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-footer-div{
  padding: 0 20px 0px 20px;
}
.first{
  border-right:2px solid #ccc ;
}
.login-footer-div img{
  display: block;
  float: left;
  margin-right: 10px;
}
</style>
